@import url('https://fonts.googleapis.com/css2?family=Montaser:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montaser:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

*{
    font-family: 'Montaser', 'Poppins', 'Montsserrat';
text-decoration: none;
}
body{
background-color: rgb(46, 46, 53);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
}

nav{
width: 100%;
height: 80px;
    background-color: black;
position: absolute;
left: -01px;
top: -0px;
display: flex;
align-items: center;
overflow: hidden;
}
.logo{
width: 100px;
height: 100px;
background-image: url('/Logo/NovaLogo.png');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
margin-left: 40px;
filter: brightness(100);

}
li{
list-style: none;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
font-size: 80%;
}
ul{
display: flex;
gap: 50px;
}
.textos{
width: 900px;
    position: absolute;
left: 170px;
}
.text3{
position: relative;
cursor: default;
}
.text3::after{
    content: "";
    width: 100%;
    height: 5px;
    background: blue;
    position: absolute;
top: 17px;
left: -0px;
}
.text2{
position: relative;
transition: color .3s ease-in-out;
color: white;
}
.text2:after{
content: "";
width: 0px;
height: 5px;
background: linear-gradient(to right, blue, rgb(195, 0, 255));
position: absolute;
left: 0px;
top: 17px;
transition: all .3s ease-in-out;
}
.text2:hover::after{
width: 100%;
}
.text2::before{
content: "serviços";
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, blue, rgb(195, 0, 255));
background-clip: text;
color: transparent;
-webkit-background-clip: text;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.text2:hover{
color: transparent;
}
.text2:hover::before{
    opacity: 1;
}
.text1{
position: relative;
transition: color .3s ease-in-out;
color: white;
}
.text1:after{
content: "";
width: 0px;
height: 5px;
background: linear-gradient(to right, blue, rgb(195, 0, 255));
position: absolute;
left: 0px;
top: 17px;
transition: all .3s ease-in-out;
}
.text1:hover::after{
width: 100%;
}
.text1::before{
content: "inicio";
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, blue, rgb(195, 0, 255));
background-clip: text;
color: transparent;
-webkit-background-clip: text;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.text1:hover{
color: transparent;
}
.text1:hover::before{
    opacity: 1;
}

.text4{
position: relative;
transition: color .3s ease-in-out;
color: white;
}
.text4:after{
content: "";
width: 0px;
height: 5px;
background: linear-gradient(to right, blue, rgb(195, 0, 255));
position: absolute;
left: 0px;
top: 17px;
transition: all .3s ease-in-out;
}
.text4:hover::after{
width: 100%;
}
.text4::before{
content: "login";
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, blue, rgb(195, 0, 255));
background-clip: text;
color: transparent;
-webkit-background-clip: text;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.text4:hover{
color: transparent;
}
.text4:hover::before{
    opacity: 1;
}


.text5{
position: relative;
transition: color .3s ease-in-out;
color: white;
}
.text5:after{
content: "";
width: 0px;
height: 5px;
background: linear-gradient(to right, blue, rgb(195, 0, 255));
position: absolute;
left: 0px;
top: 17px;
transition: all .3s ease-in-out;
}
.text5:hover::after{
width: 100%;
}
.text5::before{
content: "baixar o app";
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, blue, rgb(195, 0, 255));
background-clip: text;
color: transparent;
-webkit-background-clip: text;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.text5:hover{
color: transparent;
}
.text5:hover::before{
    opacity: 1;
}
.container1{
width: 500px;
height: 600px;
background-color: grey;
border-radius: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
pointer-events: none;
}
.container1::before{
content: "";
    width: 71%;
height: 150%;
background: linear-gradient(blue, rgb(195, 0, 255));
position: absolute;
animation: animate 3s linear infinite;
}
@keyframes animate{
100%{
    transform: rotate(360deg);
}
}
.container1::after{
width: 98%;
height: 98%;
position: absolute;
content: "";
background-color: black;
border-radius: 50px;
top: 06px;
}
.texts1{
position: absolute;
height: 300px;
width: 200px;
background-color: rgb(24, 24, 24);
    z-index: 1;
 
border-radius: 30px;
overflow: hidden;
pointer-events: none;

}
h1{
    position: relative;
    top: 10px;
    left: 40px;
}
h3{
position: relative;
left: 40px;
top: 40px;
}

h5{
    position: relative;
color: white;
left: 40px;
top: -035px;
}
h2{
position: relative;
top: -10px;
font-size: 114%;
left: 40px;
}

h1, h2, h3, h4, h5{
    pointer-events: none;
}
.precos1{
    width: 200px;
    height: 100px;
    background-color: blue;
    position: absolute;
    z-index: 1;
    top: 304px;
border-radius: 20px;
background-color: rgb(24, 24, 24);
display: flex;
justify-content: center;
}
.juntar1{
    position: absolute;
    top: 90px;
    left: 160px;

}
.valor1{
position: absolute;
left: 75px;

}
.rs1{
position: absolute;
top: -4px;
left: 87px;
}